<template>
  <div class="scan">
    <el-row>
      <el-col>
        <el-input
          placeholder="请输入单号"
          ref="order"
          v-model="input"
          clearable
          @keyup.enter.native="scan"
          @blur="blurInput"
        ></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-button icon="el-icon-camera" type="primary" round @click="scan"
          >扫描
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Scan } from "@/api/Box";

export default {
  data() {
    return {
      input: "",
    };
  },
  mounted() {
    this.$refs.order.focus();
  },
  methods: {
    async scan() {
      if (this.input) {
        console.log(this.input);
        const res = await Scan({ ScanNo: this.input });
        if (res.data.status === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
        this.input = "";
      } else {
        this.$message.warning("请输入单号");
      }
      this.$refs.order.focus();
    },
    blurInput() {
      this.$refs.order.focus();
    },
  },
};
</script>

<style scoped lang="scss">
.scan {
  padding: 200px 10%;
}

.el-button.is-round {
  width: 99%;
  margin-top: 20px;
}
</style>
